import { Scatter } from '@ant-design/plots';
import React, { useEffect, useState } from 'react';

interface ScatterChartProps {
  scatterChartID: string;
  buyParam: string;
  ScatterChartDataList: ScatterChartData;
}

type User = {
  用户名: string;
  用户ID: string;
  手机号码: number;
  年龄: string;
  消费金额: number;
  月份: number;
  购买渠道: string;
  购买产品: string;
  购买数量: number;
};

type Product = {
  品名: string;
  品牌: string;
  产品编号: string;
  产品规格: string;
  产品单价: number;
  月份: number;
  口味: string;
  生产日期: string;
  购买数量: number;
};

type ScatterChartData = [User[], Product[]];

const ScatterChart: React.FC<ScatterChartProps> = ({
  scatterChartID,
  buyParam,
  ScatterChartDataList,
}) => {
  const scatterChartData = ScatterChartDataList;
  const [yFields, setyFields] = useState('');
  const [data1, setData1] = useState(scatterChartData[0]);
  useEffect(() => {
    if (buyParam === '消费者') {
      setData1(scatterChartData[0]);
      setyFields('消费金额');
    } else if (buyParam === '产 品') {
      setData1(scatterChartData[1]);
      setyFields('产品单价');
    }
  }, [buyParam]);

  const config = {
    autoFit: 'true',
    data: data1,
    xField: '月份',
    yField: yFields,
    sizeField: '购买数量',
    shapeField: 'point',
    scale: {
      size: { type: 'log', range: [0, 15] },
    },
    style: { fillOpacity: 0.9, lineWidth: 0.1 },
    axis: {
      x: {
        line: true,
        lineStroke: '#fafafa',
        arrow: true,
        lineArrowSize: 15,
        lineStrokeOpacity: 1,
        tick: true,
        tickStroke: '#fff',
        label: true,
        labelFill: '#fff',
        labelFontSize: 16,
        labelFillOpacity: 1,
        title: '月份',
        titleStroke: '#fff',
        titleFontSize: 16,
      },
      y: {
        line: true,
        lineStroke: '#fff',
        arrow: true,
        lineArrowSize: 15,
        grid: true,
        gridStroke: '#fff',
        gridStrokeOpacity: 1,
        lineStrokeOpacity: 1,
        tick: true,
        tickStroke: '#fff',
        label: true,
        labelFill: '#fff',
        labelFontSize: 16,
        labelFillOpacity: 1,
        title: '消费金额',
        titleStroke: 'white',
        titleFontSize: 16,
      },
    },
  };
  return <Scatter id={scatterChartID} {...config} />;
};

export default ScatterChart;
